<template>
	<view class="container">
		<view class="form">
			<view class="grace-form-item grace-border-b">
				<text class="grace-form-label">收货人</text>
				<view class="grace-form-body"><input type="text" class="grace-form-input" v-model="params.name" name="name1"
					 placeholder="请输入收货人" /></view>
			</view>
			<view class="grace-form-item grace-border-b">
				<text class="grace-form-label">手机号码</text>
				<view class="grace-form-body"><input type="text" class="grace-form-input" v-model="params.phone" name="name1"
					 placeholder="请输入手机号码" maxlength="11" /></view>
			</view>
			<view class="grace-form-item grace-border-b" @click="open">
				<text class="grace-form-label">现居城市</text>
				<view class="grace-form-body"><input type="text" class="grace-form-input" :value="params.pro + ' ' + params.city + ' ' + params.area"
					 disabled placeholder="请选择" /></view>
				<text class="grace-icons icon-arrow-down grace-form-icon grace-text-center"></text>
			</view>
			<view class="grace-form-item grace-border-b">
				<text class="grace-form-label">详细地址</text>
				<view class="grace-form-body"><input type="text" class="grace-form-input" v-model="params.address" name="name1"
					 placeholder="请输入详细地址" /></view>
			</view>

		</view>
		<graceAddressPicker :show="show" @confirm="confirm" :level="3" @close="close" cancelText="关闭"></graceAddressPicker>
		<view class="tips">
			<view class="left">
				设置为默认地址
			</view>
			<view class="right">
				<switch color="#ee0a25" style="scale: .8;" @change="defalt" :checked="params.if_default" />
			</view>
		</view>
		<view class="btn"><button type="warn" class="grace-button" style="border-radius: 50upx;" @click="save" :disabled="!params.name||!params.phone||!params.city||!params.address">保存并使用</button></view>
	</view>
</template>

<script>
	import graceAddressPicker from '../../graceUI/components/graceAddressPicker.vue';
	import {
		addAddress,
		getAddress,
		editAddress
	} from '@/api/index.js'
	export default {
		data() {
			return {
				id: "", //编辑id
				show: false,
				openid: "", //用户id
				params: { //请求数据
					pro: "", //省
					city: '', //市
					area: "", //区
					name: '',
					phone: '',
					address: '',
					if_default: false, //1 默认地址，2非默认地址  
				},

			};
		},
		onLoad(options) {
			if (options.id != undefined) {
				this.id = options.id
				this.getAddress(); //获取单个地址(编辑)
			}
		},
		onShow() {
			this.openid = uni.getStorageSync('openid');
		},
		methods: {
			// 获取单个地址(编辑)
			getAddress: function() {
				getAddress({
					id: this.id
				}).then(res => {
					res.if_default = res.if_default == 1 ? true : false
					this.params = res;
				})
			},

			// 选择地址
			open: function() {
				this.show = true;
			},
			confirm: function(e) {
				// 返回选中城市的编号及文本信息
				console.log(e);
				this.params.pro = e.names[0];
				this.params.city = e.names[1];
				this.params.area = e.names[2];
				this.close();
			},
			close: function() {
				this.show = false;
			},

			// 是否默认
			defalt: function(event) {
				this.params.if_default = event.detail.value
			},

			// 保存
			save() {
				let params = this.params;
				// params['if_default'] = params['if_default'] ? 1 : 2;
				params['openid'] = this.openid;
				if (this.id) { //编辑地址
					editAddress(params).then(res => {
						if (res == 1) {
							uni.showToast({
								title: '保存成功!',
								duration: 1000
							})
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								})
							}, 1000)
						}
					})
				} else { //新增地址
					addAddress(params).then(res => {
						if (res == 1) {
							uni.showToast({
								title: '保存成功!',
								duration: 1000
							})
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								})
							}, 1000)
						}
					})
				}

			}
		},
		components: {
			graceAddressPicker
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		padding: 20upx;

		>view {
			border-radius: 18upx;
			background: #fff;
			margin-bottom: 20upx;
			padding: 20upx;
			box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.08);
		}
	}

	.tips {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20upx;
	}
</style>
